@grey: #999;
@blue: #0a83d7;

#common {
  .banner {
    height: 200px;
    background: #333;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }


  .category1 {
    padding-right: 50px;
    dt {
      font-size: 24px; line-height: 84px;
      border-bottom: 1px solid #999999;
    }
    dd {
      padding: 30px 0;
      .item {
        float: left;
        width: 230px;
        .img {
          height: 230px;
          img { width: 100%; height: 100%; display: block;}
        }
        .content {
          padding: 10px 0;
          line-height: 1.5;
          .t2 {
            font-size: 18px;
          }
        }
      }
    }
  }

  .category2 {
    padding-right: 50px;
    .title {
      font-size: 24px; line-height: 84px;
      border-bottom: 1px solid #999999;
    }
    .main {
      .subtitle {
        font-size: 20px;
        line-height: 80px;
      }
      .content {
        margin-bottom: 20px;
        .img {
          width: 60px;
          height: 60px;
          float: left;
          overflow: hidden;
          margin-right: 24px;
          img { display: block;
            width: 100%;
            height: 100%;
          }
        }
        h4 { font-size: 16px; margin: 0; line-height: 1.5;}
        p { color: #808080; font-size: 14px;}
      }
    }
  }

  .category3 {
    padding-right: 50px;
    dt {
      font-size: 24px; line-height: 84px;
      border-bottom: 1px solid #999999;
    }
    dd {
      margin-top: 30px;
      line-height: 1.5;
      .date { font-size: 12px; color: #808080;}
    }
  }
  .category4 {
    padding-right: 50px;
    dt {
      font-size: 24px; line-height: 84px;
      border-bottom: 1px solid #999999;
    }
    dd {
      margin-top: 36px;
      .info {
        h4 { font-size: 16px; margin: 0; line-height: 1.5;}
        p { color: #808080; font-size: 14px;}
      }
      .img-list {
        font-size: 0;
        img {
          width: 90px;
          height: 90px;
          display: inline-block;
          margin-right: 10px;
        }
      }
    }
  }

  .hot {
    .item .title {
      margin: 0;
      padding: 24px 0;
      border-bottom: 1px solid #999999;
    }
    dd>.item {
      padding-right: 80px;
      &:last-of-type {
        padding-right: 0;
      }
    }
    .case {
      .content {
        margin-top: 40px;
        .img {
          width: 160px;
          height: 100px;
          float: left;
          overflow: hidden;
          margin-right: 24px;
          img { display: block;
            width: 100%;
            height: 100%;
          }
        }
        h4 { font-size: 18px; margin: 0; line-height: 1.5;}
        p { color: #808080; font-size: 14px;}
      }
    }
    .designer {
      .content {
        margin-top: 40px;
        .item {
          float: left;
          .img {
            width: 135px;
            height: 100px;
            overflow: hidden;
            margin-right: 40px;
            img { display: block;
              width: 100%;
              height: 100%;
            }
          }
          .txt {
            margin-top: 10px;
          }
        }
      }
    }
    .site {
      .content {
        margin-top: 40px;
        .item {
          float: left;
          margin-right: 30px;
          &:last-of-type {
            margin-right: 0;
          }
          .img {
            width: 135px;
            height: 100px;
            overflow: hidden;
            position: relative;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .eyes {
              position: absolute;
              left: 20px;
              bottom: 15px;
              color: #fff;
              i {
                margin-right: 6px;
              }
            }
          }
          .txt {
            margin-top: 10px;
          }
        }
      }
    }
  }

  .float-bar {
    background: #f1f4f9;
    padding: 15px 15px 50px;
    .title {
      font-size: 24px;
      line-height: 1.5;
      border-bottom: 6px solid @blue;
    }
  }
  .other-case {
    dd {
      &:first-of-type {
        margin-top: 18px;
      }
    }
    .img {
      img { width: 100%;}
    }
    .content {
      padding: 15px 0;
      .t2 {
        font-size: 18px;
      }
    }
  }

  .other-designer {
    .designer {
      padding: 20px 0;
      .designer-img {
        width: 60px;
        height: 60px;
        overflow: hidden;
        margin-right: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .designer-info {
        overflow: hidden;
        margin-left: 15px;
        .d1 {
          line-height: 20px;
          color: #333;
          .name {
            font-size: 20px;
            padding-right: 15px;
            border-right: 1px solid #333;
          }
        }
        .d2 {
          margin-top: 10px;
        }
      }
    }
  }

  .focus-floor {
    dd {
      margin-top: 20px;
      .img {
        width: 160px;
        height: 100px;
        float: left;
        overflow: hidden;
        margin-right: 20px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
        .eyes {
          position: absolute;
          left: 20px;
          bottom: 15px;
          color: #fff;
          i {
            margin-right: 6px;
          }
        }
      }
      .content {
        .t1 {
          padding-top: 10px;
        }
        .t2 { font-size: 14px; color: @grey;}
        .location {
          margin-top: 15px;
          i {
            margin-right: 8px;
          }
        }
      }
    }
  }
}

